第一次在Vue项目中播放m3u8格式视频遇到的问题和解决方法 |
您所在的位置：网站首页 › libvlcsharp m3u8卡顿 › 第一次在Vue项目中播放m3u8格式视频遇到的问题和解决方法 |
第一次在Vue项目中播放m3u8格式视频遇到的问题和解决方法
|
一、m3u8文件
第一次接触这种m3u8格式的视频文件，开始以为类似与.mp4这种，所以在项目中我通过html5提供的video标签做播放功能发现并不能成功，后来了解到M3U8文件是一种UTF-8编码格式的M3U文件，而M3U文件是记录一个索引纯文本文件,打开它时播放软件并不是播放它,而是根据它的索引找到对应的音视频文件的网络地址进行在线播放，种种格式常见在直播视频，监控视频。 简单的说，m3u8存放的是播放列表，视频以另一种格式储。如果使用mp4那么在多个分块直接播放时，就会出现卡顿。 m3u8不是video标签的支持的标准格式，也就是说这样的常规操作 是无法实现的。 二、遇到的问题看了许多解决问题的文章: https://my.oschina.net/u/3263153/blog/1805378.类似与此都是使用videojs这个开源内容，外加一层皮肤。我也尝试了很多次，反反复复地安装和卸载video.js和videojs-contrib-hls两个包，出现的问题是不论实在全局或者是需要的组件里面一旦import这两个包就会报错，也尝试着通过源码解决问题，但始终没能成功。 刚刚说过m3u8是存放的是视频列表，而不是视频文件。 贴代码 playVideo () { this.$refs.videolist.innerHTML=''; this.videoList.push(this.vidoeSrc) let idArr = []; this.videoList.forEach((item,index)=>{ var dynamicDom = document.createElement('div'); dynamicDom.style.width = 30 +'%'; dynamicDom.style.float = 'left'; dynamicDom.style.overflow = 'hidden'; dynamicDom.id = 'site' + index; dynamicDom.className ='wd50005 vh50005 pl005 pr005 pb005 ml005' let obj = {}; obj.id = dynamicDom.id;//dom对应的id obj.url = this.videoItem.playurl // 测试视频 // obj.url = "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8" idArr.push(obj); console.log(idArr); this.$refs.videolist.appendChild(dynamicDom); }); this.mountVideoFn(idArr); }, mountVideoFn(idArr){ for(var i = 0;i < idArr.length;i ++){ var player = 'player'+i; player = new TcPlayer(idArr[i].id, { m3u8: idArr[i].url, autoplay: this.videoAutoPlay, // coverpic: "http://www.test.com/myimage.jpg", width: "100%", height: "100%" }); } },动态生成了一个视频播放的容器，点击播放的时候遍历拿到每一条视频。 beforeDestroy() { this.videoAutoPlay = false; this.$refs.videolist.innerHTML=''; },在mounted钩子函数中调用一次函数获取视频列表。 在beforeDestroy钩子函数中初始化这个容器以及暂停自动播放。 这里面还有很多学问，像字幕，加密，清晰度等，我暂时还没有接触，以后遇到了再和大家分享 |
看了一些文章，有说是因为videojs版本的问题，很多朋友使用videojs 7.0+时，也会出现这种问题，也有说是因为node.js的内部自带了video.js当我们再install video.js就会产生冲突。说法不一，我也都尝试过，始终没有成功。【本文地址】